﻿<template>
    <div class="refreshCache-container">
        <el-card shadow="hover">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
                    <div class="grid-content ep-bg-purple" />
                    <el-checkbox
                        v-model="state.esCheckAll"
                        :indeterminate="state.esIsIndeterminate"
                        @change="handleCheckAllChange"
                    >
                        ES(垫付)
                    </el-checkbox>
                    <el-checkbox-group
                        v-model="state.queryParams.cacheKeyNames"
                        @change="handleCheckedCitiesChange"
                    >
                        <el-checkbox
                            v-for="esDict in state.EsDict"
                            :key="esDict.value"
                            :label="esDict.value"
                        >
                            {{ esDict.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
                    <div class="grid-content ep-bg-purple" />
                </el-col>
                <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
                    <el-button
                        type="primary"
                        icon="ele-Refresh"
                        @click="handleQuery"
                        v-auth="'whiteList:query'"
                    >
                        刷新
                    </el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="refreshCache">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

import SysRefreshCacheApi from '/@/api/common/refreshCache';

// 定义响应式状态
const state = reactive({
    esCheckAll: false,
    esIsIndeterminate: false,
    loading: false,
    queryParams: {
        omsPlatform: 3,
        cacheKeyNames: [] as string[], // 存储选中的value值
    },
    EsDict: [
        { value: "Cache_EsProductChannelPlanToday_All", label: '当日计划' },
        { value: "Cache_EsProduct_All", label: '产品' },
        { value: "Cache_EsProductChannel_All", label: '产品渠道' },
    ],
});

// 全选/取消全选处理
const handleCheckAllChange = (val: boolean) => {
    state.queryParams.cacheKeyNames = val ? state.EsDict.map(item => item.value) : [];
    state.esIsIndeterminate = false;
}

// 单个选项变化处理
const handleCheckedCitiesChange = (value: string[]) => {
    const checkedCount = value.length;
    const totalCount = state.EsDict.length;
    state.esCheckAll = checkedCount === totalCount;
    state.esIsIndeterminate = checkedCount > 0 && checkedCount < totalCount;
}

// 查询操作
const handleQuery = async () => {
    state.loading = true;
    try {
        // 这里添加实际的刷新逻辑
        // console.log('选中的缓存项：',  JSON.stringify(state.queryParams));
        const res = await SysRefreshCacheApi().refreshCache(state.queryParams);

        if (res.data.resCode != '0000')
            ElMessage.error(res.data.resMessage);
        else {
            ElMessage.success("操作成功");
        }

        // ElMessage.success('刷新操作已触发' + JSON.stringify(res));
    } finally {
        state.loading = false;
    }
};

</script>
